<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="along&#39;s blog">
  <meta name="keyword" content="hexo-theme, vuejs">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      脚手架工具 | ALONG
    
  </title>
  <link href="/cdn.along/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="/cdn.along/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="/cdn.along/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
  <script src="/cdn.along/jquery/3.2.1/jquery.min.js"></script>
  <script src="/cdn.along/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="/cdn.along/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
  
  
    <!-- MathJax support START -->
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="/cdn.along/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <!-- MathJax support END -->
  


  
  
    
<script src="/js/local-search.js"></script>


<meta name="generator" content="Hexo 5.4.0"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>
  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>ALONG</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link">Home</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">Tags</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">Archives</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">About</a>
          
        </li>
      
      
        <li class="menu-item menu-item-search right-list">
    <a role="button" class="popup-trigger">
        <i class="fa fa-search fa-fw"></i>
    </a>
</li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">Home</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">Tags</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">Archives</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">About</a>
            
          </li>
        
      </ul>
    </div>
    
      <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
            <span class="search-icon">
                <i class="fa fa-search"></i>
            </span>
            <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off"
                    placeholder="Please enter your keyword(s) to search." spellcheck="false"
                    type="search" class="search-input">
            </div>
            <span class="popup-btn-close">
                <i class="fa fa-times-circle"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>
    
  </div>
</header>

    <div id="article-banner">
  <h2>脚手架工具</h2>
  <p class="post-date">2020-08-27</p>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
<main class="app-body flex-box">
  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content"><h2 id="脚手架工具"><a href="#脚手架工具" class="headerlink" title="脚手架工具"></a>脚手架工具</h2><p>特定项目脚手架，比如</p>
<ul>
<li>creat-react-app</li>
<li>vue-cli</li>
</ul>
<p>通用脚手架工具</p>
<ul>
<li>Yeoman</li>
<li>plop</li>
</ul>
<h3 id="Yeoman-通用脚手架"><a href="#Yeoman-通用脚手架" class="headerlink" title="Yeoman 通用脚手架"></a>Yeoman 通用脚手架</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">yarn global add yo</span><br><span class="line">yarn global add generator-node</span><br></pre></td></tr></table></figure>
<p>我再安装时出现了yo不是内部命令的问题<br>将yarn添加到path 重新执行上述命令，可以通过</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn global bin</span><br></pre></td></tr></table></figure>
<p>查看yarn全局安装路径</p>
<p>创建生成器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yo node</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">? The name above already exists on npm, choose another? Yes</span><br><span class="line">? Module Name along-yo  &#x2F;&#x2F; 生成器名称</span><br><span class="line">? Description test yeoman &#x2F;&#x2F; 描述</span><br><span class="line">? Project homepage url https:&#x2F;&#x2F;github.com&#x2F;alongithub&#x2F;along-yo &#x2F;&#x2F; 访问地址</span><br><span class="line">? Author&#39;s Name along &#x2F;&#x2F; 作者</span><br><span class="line">? Author&#39;s Email 1792108796@qq.com &#x2F;&#x2F; 邮箱</span><br><span class="line">? Author&#39;s Homepage https:&#x2F;&#x2F;github.com&#x2F;alongithub &#x2F;&#x2F; 作者主页</span><br><span class="line">? Package keywords (comma to split) node,test,yeoman &#x2F;&#x2F; 关键字</span><br><span class="line">? Send coverage reports to coveralls No &#x2F;&#x2F; 覆盖率</span><br><span class="line">? Enter Node versions (comma separated)</span><br></pre></td></tr></table></figure>

<p>已进入到相应目录使用 yo 指令生成项目，可是却在其他文件夹下生成了项目。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Just found a &#96;.yo-rc.json&#96; in a parent directory.</span><br><span class="line">Setting the project root at: &#x2F;Users&#x2F;Pacos</span><br></pre></td></tr></table></figure>

<p>找到 .yo-rc.json 文件，删除既可以解决。</p>
<h3 id="Yeoman-Sub-Generator"><a href="#Yeoman-Sub-Generator" class="headerlink" title="Yeoman Sub Generator"></a>Yeoman Sub Generator</h3><p>如果只需要生成项目结构的一部分，比如增加eslint，或者单独增加一个readme，可以使用yeoman 提供的sub generator 功能</p>
<p>比如使用 generator-node 提供的cli子集生成cli应用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yo node:cli</span><br></pre></td></tr></table></figure>

<p>之后yo会重写package.json, 自动写入 bin, dependencies 信息,并创建cli基础结构</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;bin&quot;: &quot;lib/cli.js&quot;,</span><br><span class="line">  &quot;dependencies&quot;: &#123;</span><br><span class="line">    &quot;meow&quot;: &quot;^3.7.0&quot;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 自动创建的cli   lib/cli.js</span></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="meta">&#x27;use strict&#x27;</span>;</span><br><span class="line"><span class="keyword">const</span> meow = <span class="built_in">require</span>(<span class="string">&#x27;meow&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> yeomandemo = <span class="built_in">require</span>(<span class="string">&#x27;./&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> cli = meow(<span class="string">`</span></span><br><span class="line"><span class="string">Usage</span></span><br><span class="line"><span class="string">  $ yeomandemo [input]</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">Options</span></span><br><span class="line"><span class="string">  --foo  Lorem ipsum. [Default: false]</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">Examples</span></span><br><span class="line"><span class="string">  $ yeomandemo</span></span><br><span class="line"><span class="string">  unicorns</span></span><br><span class="line"><span class="string">  $ yeomandemo rainbows</span></span><br><span class="line"><span class="string">  unicorns &amp; rainbows</span></span><br><span class="line"><span class="string">`</span>);</span><br></pre></td></tr></table></figure>
<p>之后先通过命令安装package中的依赖</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">yarn   </span><br><span class="line">&#x2F;&#x2F; 或者npm install</span><br></pre></td></tr></table></figure>

<p>link到全局范围</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn link</span><br></pre></td></tr></table></figure>

<p>通过创建的项目名称即可在全局使用cli命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yeomandemo --help</span><br></pre></td></tr></table></figure>

<pre style="background: #000; color: #ccc">
C:\Users\admin\Desktop\yeomandemo>yeomandemo --help
  yodemo

  Usage
    $ yeomandemo [input]

  Options
    --foo  Lorem ipsum. [Default: false]

  Examples
    $ yeomandemo
    unicorns
    $ yeomandemo rainbows
    unicorns & rainbows
</pre>

<h3 id="以generator-webapp为例，创建一个webapp项目"><a href="#以generator-webapp为例，创建一个webapp项目" class="headerlink" title="以generator-webapp为例，创建一个webapp项目"></a>以generator-webapp为例，创建一个webapp项目</h3><p>安装对应的generator</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn global add generator-webapp</span><br></pre></td></tr></table></figure>

<p>执行generator</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yo webapp</span><br></pre></td></tr></table></figure>

<p>之后根据提示选择需要的依赖即可创建webapp项目，由于这个生成器存在一些c++模块所以安装时会比较慢</p>
<p>执行启动就可以看到界面了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn start</span><br></pre></td></tr></table></figure>
<p><img src="/20200616191859687/20200617112953463.png" alt="image"><br><img src="/20200616191859687/20200617111505906.png" alt="npm 镜像源"></p>
<h3 id="创建自己的generator"><a href="#创建自己的generator" class="headerlink" title="创建自己的generator"></a>创建自己的generator</h3><p>创建Generator项目需要遵循一定的结构</p>
<pre style="background: #000; color: #ccc">
├ generators/ ·····································  生成器目录
|  ├ app/ ·········································  默认生成器目录
|  |  └ index.js ··································  默认生成器入口实现
|  └ component/ ···································  sub generator 目录
|     └ index.js ··································  sub generator 实现
└ package.json
</pre>

<ol>
<li><p>创建生成器目录  generator-alongtest， 初始化项目, 安装 yeoman-generator模块</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cd generator-alongtest</span><br><span class="line">yarn init</span><br><span class="line">yarn add yeoman-generator</span><br></pre></td></tr></table></figure>
</li>
<li><p>创建generator 规定的项目结构 ，app/index.js 中</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; generator入口</span><br><span class="line">const Generator &#x3D; require(&#39;yeoman-generator&#39;);</span><br><span class="line">module.exports &#x3D; class extends Generator &#123;</span><br><span class="line">    writing() &#123;</span><br><span class="line">        &#x2F;&#x2F; yeoman 在生成文件阶段自动调用此方法</span><br><span class="line">        </span><br><span class="line">        &#x2F;&#x2F; 使用yeoman的fs方法在项目中创建一个temp.txt文件，文件内容是一个随机浮点数</span><br><span class="line">        this.fs.write(</span><br><span class="line">            this.destinationPath(&#39;temp.txt&#39;),</span><br><span class="line">            Math.random().toString()</span><br><span class="line">        )</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>将自定义generator link到全局</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn link</span><br></pre></td></tr></table></figure></li>
<li><p>新建一个项目文件夹，如 test，</p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd test</span><br><span class="line">yo alongtest</span><br></pre></td></tr></table></figure>
<p>此时可以看到test文件夹自动生成了temp.txt文件</p>
<pre style="background:#000;color:#ccc">
C:\Users\admin\Desktop\alontest>yo alongtest
   create temp.txt 
</pre>

<h3 id="接收用户输入并通过模板创建文件"><a href="#接收用户输入并通过模板创建文件" class="headerlink" title="接收用户输入并通过模板创建文件"></a>接收用户输入并通过模板创建文件</h3><ol>
<li>app 下创建模板文件夹templates，和项目文件index.html,package.json<br>这里只用两个文件代表初始化项目中的所有文件</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; app&#x2F;templates&#x2F;index.html</span><br><span class="line">&#x2F;&#x2F; 模板文件</span><br><span class="line">&#x2F;&#x2F; 内部通过EJ5 模板标记输出数据</span><br><span class="line">&#x2F;&#x2F; 其他的EJS 语法也支持</span><br><span class="line">&lt;html&gt;</span><br><span class="line">    &lt;head&gt;</span><br><span class="line">        &lt;title&gt;</span><br><span class="line">            &lt;%&#x3D; name %&gt;</span><br><span class="line">        &lt;&#x2F;title&gt;</span><br><span class="line">    &lt;&#x2F;head&gt;</span><br><span class="line">    &lt;body&gt;</span><br><span class="line">         &lt;%if (name) &#123;%&gt;</span><br><span class="line">            project &lt;%&#x3D; name%&gt;</span><br><span class="line">        &lt;%&#125; else &#123;%&gt;</span><br><span class="line">            no name</span><br><span class="line">        &lt;%&#125;%&gt;</span><br><span class="line">    &lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; package.json</span><br><span class="line">&#123;</span><br><span class="line">    &quot;name&quot;: &quot;&lt;%&#x3D; name%&gt;&quot;,</span><br><span class="line">    &quot;version&quot;: &quot;1.0.0&quot;,</span><br><span class="line">    &quot;main&quot;: &quot;index.js&quot;,</span><br><span class="line">    &quot;license&quot;: &quot;MIT&quot;,</span><br><span class="line">    &quot;dependencies&quot;: &#123;</span><br><span class="line">      &quot;yeoman-generator&quot;: &quot;^4.10.1&quot;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>入口文件 app/index.js<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; generator入口</span><br><span class="line">const Generator &#x3D; require(&#39;yeoman-generator&#39;);</span><br><span class="line">module.exports &#x3D; class extends Generator &#123;</span><br><span class="line">    &#x2F;&#x2F; 获取用户输入</span><br><span class="line">    prompting() &#123;</span><br><span class="line">        return this.prompt([</span><br><span class="line">            &#123;</span><br><span class="line">                type: &#39;input&#39;,</span><br><span class="line">                name: &#39;name&#39;,</span><br><span class="line">                message: &#39;your project name&#39;,</span><br><span class="line">                default: this.appname, &#x2F;&#x2F; 自动取到了当前项目目录</span><br><span class="line">            &#125;,</span><br><span class="line">        ]).then(answer &#x3D;&gt; &#123;</span><br><span class="line">            this.answer &#x3D; answer;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    writing() &#123;</span><br><span class="line">        const filelist &#x3D; [&#39;index.html&#39;, &#39;package.json&#39;];</span><br><span class="line">        &#x2F;&#x2F; yeoman 在生成文件阶段自动调用此方法</span><br><span class="line">        &#x2F;&#x2F; this.fs.write(</span><br><span class="line">        &#x2F;&#x2F;     this.destinationPath(&#39;temp.txt&#39;),</span><br><span class="line">        &#x2F;&#x2F;     Math.random().toString()</span><br><span class="line">        &#x2F;&#x2F; )</span><br><span class="line"></span><br><span class="line">        filelist.forEach(file &#x3D;&gt; &#123;</span><br><span class="line">            &#x2F;&#x2F; 通过模板引擎吸入文件到目标目录</span><br><span class="line">            &#x2F;&#x2F; 找到模板文件</span><br><span class="line">            const tmpl &#x3D; this.templatePath(file)</span><br><span class="line">            &#x2F;&#x2F; 输出目标路径</span><br><span class="line">            const output &#x3D; this.destinationPath(file);</span><br><span class="line">            &#x2F;&#x2F; 模板数据上下文</span><br><span class="line">            const context &#x3D; this.answer;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">            this.fs.copyTpl(tmpl, output, context); </span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>在新建项目中执行 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yo alongtest</span><br></pre></td></tr></table></figure>
此时命令行会询问信息，最终创建项目结构<pre style="background:#000;color: #fff">
C:\Users\admin\Desktop\alontest>yo alongtest
? your project name along
conflict index.html
? Overwrite index.html? overwrite
 force index.html
</pre>
生成的index.html 与 package.json<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span></span><br><span class="line">            along</span><br><span class="line">        <span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">            project along</span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;along&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;main&quot;</span>: <span class="string">&quot;index.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;license&quot;</span>: <span class="string">&quot;MIT&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;dependencies&quot;</span>: &#123;</span><br><span class="line">      <span class="attr">&quot;yeoman-generator&quot;</span>: <span class="string">&quot;^4.10.1&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>可以看到yeomon通过模板填充的方式创建了初始项目文件</p>
<h3 id="发布generator"><a href="#发布generator" class="headerlink" title="发布generator"></a>发布generator</h3><ol>
<li><p>创建.gitignore， 提交到git</p>
</li>
<li><p>发布到npm<br><code>npm publish</code> 或者 <code>yarn publish</code><br>根据提示输入版本和用户名密码，发布成功<br>如果设置过其他npm 镜像需要切换回npm 镜像，可以借助nrm</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">yarn global add nrm</span><br><span class="line">nrm ls &#x2F;&#x2F; 查看所有可用镜像</span><br><span class="line">nrm use npm</span><br></pre></td></tr></table></figure></li>
<li><p>之后可以通过yarn global add generator-alongtest 安装 发布的生成器</p>
</li>
</ol>
<h3 id="小型脚手架工具-plop"><a href="#小型脚手架工具-plop" class="headerlink" title="小型脚手架工具 plop"></a>小型脚手架工具 plop</h3><p>用于集成到项目中生成项目中同类型的项目文件</p>
<ol>
<li>安装到项目依赖中<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add plop --dev</span><br></pre></td></tr></table></figure></li>
<li>创建入口问及那 plopfile.js</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; plop 入口问及那</span><br><span class="line"></span><br><span class="line">module.exports &#x3D; plop &#x3D;&gt; &#123;</span><br><span class="line">    plop.setGenerator(&#39;static&#39;, &#123; &#x2F;&#x2F; 模板名称</span><br><span class="line">        description: &#39;create static component&#39;,</span><br><span class="line">        prompts: [ &#x2F;&#x2F; 询问用户输入</span><br><span class="line">            &#123;</span><br><span class="line">                type: &#39;input&#39;,</span><br><span class="line">                name: &#39;name&#39;,</span><br><span class="line">                message: &#39;static component name&#39;,</span><br><span class="line">            &#125;,</span><br><span class="line">        ],</span><br><span class="line">        actions: [ &#x2F;&#x2F; 完成交互后执行的动作</span><br><span class="line">            &#123;</span><br><span class="line">                type: &#39;add&#39;, &#x2F;&#x2F; 添加文件</span><br><span class="line">                path: &#39;src&#x2F;&#123;&#123;name&#125;&#125;&#x2F;index.html&#39;, &#x2F;&#x2F; 创建后文件路径</span><br><span class="line">                templateFile: &#39;plop-templates&#x2F;static-components&#x2F;index.hbs&#39; &#x2F;&#x2F; 模板文件路径</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                type: &#39;add&#39;, &#x2F;&#x2F; 添加文件</span><br><span class="line">                path: &#39;src&#x2F;&#123;&#123;name&#125;&#125;&#x2F;css&#x2F;index.css&#39;,</span><br><span class="line">                templateFile: &#39;plop-templates&#x2F;static-components&#x2F;css&#x2F;style.hbs&#39;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                type: &#39;add&#39;, &#x2F;&#x2F; 添加文件</span><br><span class="line">                path: &#39;src&#x2F;&#123;&#123;name&#125;&#125;&#x2F;js&#x2F;index.js&#39;,</span><br><span class="line">                templateFile: &#39;plop-templates&#x2F;static-components&#x2F;js&#x2F;index.hbs&#39;</span><br><span class="line">            &#125;,</span><br><span class="line">        ]</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>创建模板文件</li>
</ol>
<p>可以在根目录创建模板文件，模板文件目录没有严格要求，需要与入口文件中一致,模板文件后缀名未hbs</p>
<pre style="background:#000;color: #ccc">
├ plop-templates/ ···············································  模板目录
|  └ static-components/ ·········································  静态组件目录
|     ├ css/ ····················································  css 模板文件夹
|     |  └ style.hbs ············································  css 模板
|     ├ js/ ·····················································  js 模板文件夹
|     |  └ index.hbs ············································  js 模板文件
|     └ index.hbs ···············································  html 模板文件
└ package.json
</pre>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; css&#x2F;style.hbs</span><br><span class="line">.&#123;&#123;name&#125;&#125; &#123;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; index.hbs</span><br><span class="line">&lt;html&gt;</span><br><span class="line">    &lt;head&gt;</span><br><span class="line">        &lt;title&gt;&#123;&#123;name&#125;&#125;&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;&#x2F;head&gt;</span><br><span class="line">    &lt;body class&#x3D;&quot;&#123;&#123;name&#125;&#125;&quot;&gt;</span><br><span class="line">        &#123;&#123;name&#125;&#125; body</span><br><span class="line">    &lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<ol start="4">
<li>使用plop命令快速创建组件<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn plop static</span><br></pre></td></tr></table></figure>
输入组件名 home  <pre style="background:#000;color: #ccc">
$ C:\Users\admin\Desktop\plop-templates\node_modules\.bin\plop static
? static component name home
√  ++ \src\home\index.html
√  ++ \src\home\css\index.css
√  ++ \src\home\js\index.js
Done in 7.45s.
</pre>

</li>
</ol>
<p>可以看到自动创建的组件文件结构<br><img src="/20200616191859687/20200617061312210.png" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; home&#x2F;css&#x2F;index.css</span><br><span class="line">.home &#123;   </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; home&#x2F;index.html</span><br><span class="line">&lt;html&gt;</span><br><span class="line">    &lt;head&gt;</span><br><span class="line">        &lt;title&gt;home&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;&#x2F;head&gt;</span><br><span class="line">    &lt;body class&#x3D;&quot;home&quot;&gt;</span><br><span class="line">        home body</span><br><span class="line">    &lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h3 id="脚手架原理实现"><a href="#脚手架原理实现" class="headerlink" title="脚手架原理实现"></a>脚手架原理实现</h3><p>脚手架的原理很简单，无非是将与定义的文件结构通过模板处理输出到目标文件，我们可以手动实现一个脚手架工具</p>
<ol>
<li><p>初始化项目<br>创建文件夹<code>cli-source</code><br><code>cd cli-source</code><br>初始化项目<code>yarn init</code></p>
</li>
<li><p>创建模板文件<br>根目录下创建文件夹用于存放模板文件</p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; templates&#x2F;index.html</span><br><span class="line">&lt;html&gt;</span><br><span class="line">    &lt;head&gt;</span><br><span class="line">        &lt;title&gt;&lt;%&#x3D;name%&gt;&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;&#x2F;head&gt;</span><br><span class="line">    &lt;body&gt;</span><br><span class="line">        </span><br><span class="line">    &lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br><span class="line">&#x2F;&#x2F; template&#x2F;style.css</span><br><span class="line">body&#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>创建入口文件cli.js<br>安装所需依赖</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add ejs</span><br></pre></td></tr></table></figure>
<p>入口文件必须有标识</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// cli.js</span></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> inquirer = <span class="built_in">require</span>(<span class="string">&#x27;inquirer&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> ejs = <span class="built_in">require</span>(<span class="string">&#x27;ejs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">inquirer.prompt([</span><br><span class="line">    &#123;</span><br><span class="line">        type: <span class="string">&#x27;input&#x27;</span>,</span><br><span class="line">        name: <span class="string">&#x27;name&#x27;</span>,</span><br><span class="line">        message: <span class="string">&#x27;Project name?&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">])</span><br><span class="line">.then(<span class="function"><span class="params">anwser</span> =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> tml = path.join(__dirname, <span class="string">&#x27;templates&#x27;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 目标目录</span></span><br><span class="line">    <span class="keyword">const</span> destDir = process.cwd();</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 复制模板文件到目标路径</span></span><br><span class="line"></span><br><span class="line">    fs.readdir(tml, <span class="function">(<span class="params">err, files</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (err) &#123;</span><br><span class="line">            <span class="keyword">throw</span> err</span><br><span class="line">        &#125;</span><br><span class="line">        files.forEach(<span class="function"><span class="params">file</span> =&gt;</span> &#123;</span><br><span class="line">            ejs.renderFile(path.join(tml, file), anwser, <span class="function">(<span class="params">err, result</span>) =&gt;</span> &#123;</span><br><span class="line">                <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;</span><br><span class="line"></span><br><span class="line">                fs.writeFileSync(path.join(destDir, file), result)</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol start="4">
<li>修改package.json<br>添加bin指定执行文件</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;bin&quot;: &quot;cli.js&quot;,</span><br></pre></td></tr></table></figure>
<ol start="5">
<li>使用和发布<br>可以通过<code>yarn link</code>link到全局使用，或者通过<code>yarn publish</code>发布到npm</li>
</ol>
</section>
    <!-- Tags START -->
    
      <div class="tags">
        <span>Tags:</span>
        
  <a href="/tags#脚手架" >
    <span class="tag-code">脚手架</span>
  </a>

      </div>
    
    <!-- Tags END -->
    <!-- NAV START -->
    
  <div class="nav-container">
    <!-- reverse left and right to put prev and next in a more logic postition -->
    
      <a class="nav-left" href="/2020/08/26/JS%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B/">
        <span class="nav-arrow">← </span>
        
          JS异步编程
        
      </a>
    
    
      <a class="nav-right" href="/2020/08/27/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%9E%84%E5%BB%BA/">
        
          自动化构建
        
        <span class="nav-arrow"> →</span>
      </a>
    
  </div>

    <!-- NAV END -->
    <!-- 打赏 START -->
    
      <div class="money-like">
        <div class="reward-btn">
          赏
          <span class="money-code">
            <span class="alipay-code">
              <div class="code-image"></div>
              <b>使用支付宝打赏</b>
            </span>
            <span class="wechat-code">
              <div class="code-image"></div>
              <b>使用微信打赏</b>
            </span>
          </span>
        </div>
        <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
      </div>
    
    <!-- 打赏 END -->
    <!-- 二维码 START -->
    
      <div class="qrcode">
        <canvas id="share-qrcode"></canvas>
        <p class="notice">扫描二维码，分享此文章</p>
      </div>
    
    <!-- 二维码 END -->
    
      <!-- No Comment -->
    
  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  
    <aside class="catalog-container">
  <div class="toc-main">
    <strong class="toc-title">Catalog</strong>
    
      <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#%E8%84%9A%E6%89%8B%E6%9E%B6%E5%B7%A5%E5%85%B7"><span class="toc-nav-text">脚手架工具</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Yeoman-%E9%80%9A%E7%94%A8%E8%84%9A%E6%89%8B%E6%9E%B6"><span class="toc-nav-text">Yeoman 通用脚手架</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Yeoman-Sub-Generator"><span class="toc-nav-text">Yeoman Sub Generator</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E4%BB%A5generator-webapp%E4%B8%BA%E4%BE%8B%EF%BC%8C%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAwebapp%E9%A1%B9%E7%9B%AE"><span class="toc-nav-text">以generator-webapp为例，创建一个webapp项目</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E5%88%9B%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84generator"><span class="toc-nav-text">创建自己的generator</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E6%8E%A5%E6%94%B6%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5%E5%B9%B6%E9%80%9A%E8%BF%87%E6%A8%A1%E6%9D%BF%E5%88%9B%E5%BB%BA%E6%96%87%E4%BB%B6"><span class="toc-nav-text">接收用户输入并通过模板创建文件</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E5%8F%91%E5%B8%83generator"><span class="toc-nav-text">发布generator</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E5%B0%8F%E5%9E%8B%E8%84%9A%E6%89%8B%E6%9E%B6%E5%B7%A5%E5%85%B7-plop"><span class="toc-nav-text">小型脚手架工具 plop</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#%E8%84%9A%E6%89%8B%E6%9E%B6%E5%8E%9F%E7%90%86%E5%AE%9E%E7%8E%B0"><span class="toc-nav-text">脚手架原理实现</span></a></li></ol></li></ol>
    
  </div>
</aside>
  
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = 'https://github.com/alongithub/2020/08/27/脚手架工具/';
    var banner = ''
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

    // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', '/css/images/error_icon.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== '/css/images/error_icon.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })
  })();
</script>


  <script>
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });
  </script>






    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    Copyright&copy; 2019-2022 along
    <br>
    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2020044791号-1</a>
    <!-- <br>
    Theme by <a href="https://github.com/alongithub">alongithub</a>
     -->
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("/cdn.along/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("/cdn.along/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      hljs.configure({useBR: true});
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->


<script src="/js/script.js"></script>


  </body>
</html>